<template>
  <div>
    <!-- 多选搜索框 -->
    <el-input class="search-multiple" v-model="search" placeholder=" " type="search">
      <el-button slot="append" icon="el-icon-search" @click="openVendorModal"></el-button>
      <div slot="prefix" class="tag-list">
        <el-tag v-for="(item, index) in searchValueList" style="margin: 4px 4px 0 0" :key="item[props.value]" closable size="small" @close="del(index)">
          {{ item[props.label] }}
        </el-tag>
      </div>
    </el-input>

    <common-modal-template ref="commonModalTemplateSearch" :option="tableOption" @getSelectedRows="getSelectedRows" :key="timer" @newKey="newKey"></common-modal-template>
  </div>
</template>

<script>
import CommonModalTemplate from '@/components/common-modal-template/common-modal-template.vue';

export default {
  components: {
    CommonModalTemplate
  },
  props: {
    icon: {
      type: String
    },
    // 搜索框-v-model绑定的数据
    searchValueList: {
      type: Array
    },
    // 模态层弹出的option
    tableOption: {
      type: Object
    },
    props: {
      type: Object,
      default: { label: 'label', value: 'value' }
    }
  },
  data() {
    return {
      search: '',
      timer: new Date().getTime()
    };
  },
  mounted() {},
  methods: {
    // 打开模态层
    openVendorModal() {
      // this.$emit('openVendorModal')
      this.$refs.commonModalTemplateSearch.showModal();
    },
    // 删除一项
    del(index) {
      this.searchValueList.splice(index, 1);
    },
    newKey() {
      this.timer = new Date().getTime();
    },
    getSelectedRows(rowData, title) {
      // this.properties['productName'].push({ label: rowData.name, value: rowData.id });
      // this.properties['vendorCode'] = rowData.partnerNo;
      this.$emit('getSelectedRows', rowData, title);
      // if (title === 'partInfo') {
      //     this.properties['partName'] = rowData.name;
      //     this.properties['partNo'] = rowData.partNo;
      //     this.properties['partModel'] = rowData.partModel;
      //     this.properties['partId'] = rowData.id;
      // } else {
      //     console.log('测试一下', rowData)
      //     this.properties['productName'].push({ label: rowData.name, value: rowData.id });
      //     this.properties['vendorCode'] = rowData.partnerNo;
      //     console.log(this.properties['productName'])
      // }
    }
  }
};
</script>

<style lang="scss" scoped>
.search-multiple {
  ::v-deep .el-input__prefix {
    .tag-list {
      overflow: hidden;
      height: 28px;
    }
  }
}
</style>
